<template>
    <div class="personalHome myassets">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_204')}}</h2>
            <div class="personCon">
                <div class="infopanel">
                    <div class="pabelHead clearfix">
                        <h2 class="persontitle fl">{{$t('l.personal_204')}}</h2>
                        <div class="searchput fr">
                            <input :placeholder="$t('l.trade_2')" v-model="coinname">
                            <i @click="searchcoin"></i>
                        </div>
                        <div class="checktab fr">
                            <a :class="type=='D'?'active':''" @click="changetype('D');">{{$t('l.personal_197')}}</a>
                            <a :class="type=='W'?'active':''" @click="changetype('W');">{{$t('l.personal_234')}}</a>
                        </div>
                    </div>
                    <div class="recordbox">
                        <table class="recordtable autohei">
                            <thead>
                                <tr>
                                    <th class="center">{{$t('l.personal_146')}}</th>
                                    <th>{{$t('l.home_11')}}</th>
                                    <th>{{$t('l.advert_about9')}}</th>
                                    <th v-show="type=='W'">{{$t('l.personal_237')}}</th>
                                    <th>{{$t('l.trade_96')}}</th>
                                    <th>{{$t('l.add_24')}}</th>
                                    <th class="center" style="width: 100px">{{$t('l.advert_about47a')}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in transacList" :key="index">
                                    <td class="center">{{item.createdDate}}</td>
                                    <td>{{item.code}}</td>
                                    <td>{{item.amount}}</td>
                                    <td v-show="type=='W'">{{item.fee}}</td>
                                    <td>
                                        <span>{{item.status}}</span>
                                    </td>
                                    <td>
                                        <p class="blockinfo">TXid：{{item.blockchainTxId}}</p>
                                    </td>
                                    <td class="center">
                                        <a class="probtn" :href="item.blockchainExplorer" target="_blank">{{$t('l.personal_205')}}</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pagesbar" v-if="total>0" style="text-align:center;margin-top:20px;">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                hide-on-single-page="true"
                                @current-change="handleCurrentChange"
                                :current-page="pageNum"
                                :page-size="pageSize"
                                :total="total">
                            </el-pagination>
                        </div>
                        <div class="nodata" v-else>
                            <img src="../../assets/images/7c57ae4.svg">
                            <p>{{$t('l.personal_140')}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .infopanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        min-height: 100%;
        box-sizing: border-box;
        .checktab{
            padding-right:24px;
            a{
                width:82px;
                height:32px;
                border:1px solid rgba(221,224,235,1);
                box-sizing: border-box;
                text-align:center;
                color:rgba(51,56,94,1);
                line-height:32px;
                float:left;
                cursor: pointer;
                &:first-child{
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }
                &:last-child{
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                }
                &.active{
                    background:#2D8DFE;
                    background: linear-gradient(90deg, #3360FF 0%, #04A6FE 100%);
                    color:#fff;
                    border:none;
                }
            }
        }
    }
}
.myassets{
    .pabelHead{
        border-bottom:1px solid #E9EEF4;
            padding-bottom: 15px;
    }
    .recordbox{
        padding-top:14px;
		overflow-y: auto;
    }

}
</style>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
import moment from 'moment'
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    data () {
        return {
            transacList:[],//充提列表
            coinname:"",//搜索币种
            pageNum:1,//当前页
            pageSize:10,//每页显示条数
            total:0,
            type:'W',//D充币W提币
        }
    },
    created(){
      this.getList();
    },
    methods:{
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList();
        },
        searchcoin(){
            let that = this;
            that.pageNum = 1;
            that.total = 0;
            this.getList();
        },
        //切换充提
        changetype(type){
            let that = this;
            that.type = type;
            this.pageNum = 1;
            this.total = 0;
            that.getList();

        },
        //列表
        async getList(){
            let that = this;
            let res = await api.transactionList({
                currency:that.coinname,
                pageNum:that.pageNum,
                pageSize:that.pageSize,
                type:that.type
            })
            if(res.data.code==0){
                that.transacList = [];
                res.data.data.records.forEach((item,index)=>{
                    let status = "";
                    if(that.type=='W'){
                        switch (item.executionStatus){
                            case 'N':
                                item.status = that.$t('l.personal_206')
                                break;
                            case 'W':
                                item.status = that.$t('l.personal_207')
                                break;
                            case 'P':
                                item.status = that.$t('l.personal_207')
                                break;
                            case 'S':
                                item.status = that.$t('l.personal_208')
                                break;
                            case 'F':
                                item.status = that.$t('l.personal_209')
                                break;
                        }
                        if(item.approvalStatus=='R'){
                            item.status = that.$t('l.personal_210')
                        }
                    }else if(that.type=='D'){
                        switch (item.approvalStatus){
                            case 'P':
                                item.status = that.$t('l.personal_207')
                                break;
                            case 'A':
                                item.status = that.$t('l.personal_212')
                                break;
                            case 'R':
                                item.status = that.$t('l.personal_213')
                                break;
                            case 'W':
                                item.status = that.$t('l.personal_211')
                                break;
                        }
                    }
                    that.transacList.push(item);
                    that.total = res.data.data.total;
                    that.pageNum = res.data.data.current;
                })
            }else if(res.data.code==1210005){
                that.$layer.msg(that.$t('l.add_97'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
    },
    mounted(){

    }
}
</script>
